<template>
  <div class="form-single-fragment" style="position: relative">
    <div class="task-title">
      <div>
        <span class="text">外勤审批</span>
        <el-tag effect="dark" size="mini" type="success"
          >当前节点：启动流程</el-tag
        >
        <!-- <el-tag  effect="dark" size="mini" type="info">{{'发起人：'}}</el-tag> -->
      </div>
    </div>
    <div class="traval_submit">
      <el-button
        slot="operator"
        type="primary"
        size="mini"
        class="submit"
        @click="onSubmitClick"
      >
        提交
      </el-button>
    </div>
    <el-form
      ref="formFlowField"
      :model="formData"
      class="full-width-input"
      :disable="readOnly"
      :rules="rules"
      style="width: 100%"
      label-width="120px"
      size="mini"
      label-position="right"
      @submit.native.prevent
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="外勤定位" prop="FieldFlow.address">
            <el-input
              class="input-item"
              v-if="!readOnly"
              v-model="formData.FieldFlow.address"
              :clearable="true"
            />
            <span class="input-item input-label" v-else>{{
              formData.FieldFlow.address
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="拜访客户" prop="FieldFlow.customerId">
            <el-input
              class="input-item"
              v-if="!readOnly"
              v-model="formData.FieldFlow.customerId"
              :clearable="true"
            />
            <span class="input-item input-label" v-else>{{
              formData.FieldFlow.customerId
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label='关联类型' prop="FieldFlow.projectState">
            <el-select
              class='input-item'
              v-if="!readOnly"
              v-model='formData.FieldFlow.projectState'
              :clearable="true"
              filterable
              placeholder=""
              @change="onProjectStateValueChange"
            >
              <el-option
                v-for="item in projectStateList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
            <span class="input-item input-label" v-else>{{
              (formData.FieldFlow.projectNameDictMap || {}).name
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label='关联项目' prop="FieldFlow.projectId">
            <el-select
              class="input-item"
              v-if="!readOnly"
              v-model="formData.FieldFlow.projectId"
              :clearable="true"
              filterable
              placeholder=""
              @change="onProjectNameValueChange"
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
            <span class="input-item input-label" v-else>{{
              (formData.FieldFlow.projectNameDictMap || {}).name
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="关联名称" prop="FieldFlow.address">
            <el-input
              class="input-item"
              v-if="!readOnly"
              v-model="formData.FieldFlow.address"
              :clearable="true"
            />
            <span class="input-item input-label" v-else>{{
              formData.FieldFlow.address
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label='抵消打卡' prop="FieldFlow.projectName">
            <el-select
              class='input-item'
              v-if="!readOnly"
              v-model='formData.FieldFlow.projectState'
              :clearable="true"
              filterable
              placeholder=""
              @change="onProjectStateValueChange"
            >
              <el-option
                v-for="item in projectStateList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
            <span class="input-item input-label" v-else>{{
              (formData.FieldFlow.projectNameDictMap || {}).name
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开始时间" prop="FieldFlow.beginTime">
            <el-date-picker
              class="input-item"
              v-if="!readOnly"
              v-model="formData.FieldFlow.beginTime"
              :clearable="true"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              align="left"
              placeholder="开始时间"
            />
            <span class="input-item input-label" v-else>{{
              formData.FieldFlow.beginTime
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="结束时间" prop="FieldFlow.endTime">
            <el-date-picker
              class="input-item"
              v-if="!readOnly"
              v-model="formData.FieldFlow.endTime"
              :clearable="true"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              align="left"
              placeholder="结束时间"
            />
            <span class="input-item input-label" v-else>{{
              formData.FieldFlow.endTime
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="共计天数" prop="FieldFlow.date">
            <el-input-number
              class="input-item"
              v-if="!readOnly"
              v-model="formData.FieldFlow.date"
              :clearable="true"
              placeholder="共计天数"
            />
            <span class="input-item input-label" v-else>{{
              formData.FieldFlow.date
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="外勤事由" prop="FieldFlow.remake">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="formData.FieldFlow.remake"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <label class="page-close-box">
      <el-button type="text" @click="onClose" icon="el-icon-close"></el-button>
    </label>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
/* eslint-disable-next-line */
import { DropdownWidget } from '@/utils/widget.js';
// import flowMixins from '../../mixins/flowMixins.js';
/* eslint-disable-next-line */
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
/* eslint-disable-next-line */
import { FieldFlowController, DictionaryController } from '@/api';
import { FlowfieldApproval } from '@/api/flowController.js';

export default {
  name: 'formFlowField',
  props: {
    // 是否运行时任务
    isRuntimeTask: {
      type: [Boolean, String]
    },
    // 是否草稿
    isDraft: {
      type: [Boolean, String],
      default: false
    },
    // 是否只读
    readOnly: {
      type: Boolean,
      default: false
    },
    // 流程实例id
    processInstanceId: {
      type: String
    },
    // 抄送消息id
    messageId: {
      type: String
    },
    // 当前任务实例id
    taskId: {
      type: String
    },
    // 任务变量列表
    taskVariableList: {
      type: Array
    }
  },
  mixins: [uploadMixin, statsDateRangeMixin],
  data () {
    return {
      textarea: '',
      formData: {
        FieldFlow: {
          id: undefined,
          address: '', // 出差地点
          // customerId: undefined,
          projectState: '', // 关联类型
          projectId: '', // 关联项目
          projectName: '', // 项目名称
          // clockIn: undefined,
          beginTime: undefined, // 开始时间
          endTime: undefined, // 结束时间
          date: undefined, // 共计天数
          remake: '', // 出差事由
          // updateUserId: undefined, // 用户id
          // updateTime: undefined, // 提交时间
          createUserId: undefined, // 创建用户
          createTime: undefined // 创建时间
          // postLevel: undefined,
          // appendix: undefined,
          // isDatasourceInit: false
        }
      },
      // 关联类型下拉选
      projectStateList: [
        {
          id: 0,
          name: '商机'
        },
        {
          id: 1,
          name: '项目'
        }
      ],
      // 关联项目下拉选
      projectList: [],
      // 保存草稿后返回的taskId
      draftTaskId: undefined,
      // 保存草稿后返回的流程实例ID
      draftProcessInstanceId: undefined,
      rules: {
        'FieldFlow.beginTime': [
          { required: true, message: '请输入开始时间', trigger: 'blur' }
        ],
        'FieldFlow.date': [
          { required: true, message: '请输入共计天数', trigger: 'blur' }
        ],
        'FieldFlow.endTime': [
          { required: true, message: '请输入结束时间', trigger: 'blur' }
        ],
        'FieldFlow.address': [
          { required: true, message: '请输入外勤地点', trigger: 'blur' }
        ],
        'FieldFlow.clockIn': [
          { required: true, message: '请输入抵消打卡', trigger: 'blur' }
        ]
      },
      formFlowField: {
        formFilter: {},
        formFilterCopy: {},
        clockIn: {
          impl: new DropdownWidget(this.loadClockInDropdownList)
        },
        projectName: {
          impl: new DropdownWidget(this.loadProjectNameDropdownList)
        },
        isInit: false
      }
    }
  },
  methods: {
    // 关闭当前页面
    onClose () {
      this.$router.go(-1)
    },
    onSubmitClick (val) {
      FlowfieldApproval.FlowfieldSubmit(this, {
        fieldFlowDto: this.formData.FieldFlow
      }).then(res => {
        this.$message.success('提交成功')
        this.$router.go(-1)
      })
    },
    /**
     * 更新外勤申请
     */
    refreshFormFlowField (reloadData = false) {
      if (!this.formFlowField.isInit) {
        // 初始化下拉数据
      }
      this.formFlowField.isInit = true;
    },
    formInit () {
      this.initFormData();
    },
    ...mapActions(['reloadMessage'])
  },
  computed: {
    isStartFlow () {
      return this.processInstanceId == null;
    },
    isRuntime () {
      return typeof this.isRuntimeTask === 'string'
        ? this.isRuntimeTask === 'true'
        : this.isRuntimeTask;
    }
  },
  mounted () {

  }
};
</script>
<style scoped>
.task-title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 3px solid #409eff;
}
.task-title .text {
  height: 28px;
  line-height: 28px;
  font-weight: 600;
  font-size: 16px;
  color: #383838;
}
.task-title .el-tag {
  margin-left: 10px;
}
.traval_submit{
  text-align: right;
}
.submit {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 10px;
}

</style>
